import React from "react";
import {
  Link,
  withRouter
} from "react-router-dom";
import { Input, Button, TimePicker, Form, DatePicker, message } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import staffCss from './staff.module.css'


const { TextArea } = Input;

class feedbackDetail extends React.Component {



  state = {
    data: [],
    success: false,
    applyId: '',
    fieldNum: '',//电子券编号
    userId: ''//用户ID

  }
  componentDidMount () {


  }

  //提交反馈
  submitFeedback = (data) => {
    const playDate = data.playDate.format('YYYY-MM-DD')
    const startTime = playDate + ' ' + data.time[0].format("HH:mm:ss")
    const endTime = playDate + ' ' + data.time[1].format("HH:mm:ss")
    const applyId = this.props.location.state.detail.applyId

    this.$axios({
      method: 'post',
      url: "/wx/portal/feedback",
      data: {
        // userId: "01012000",
        applyId: applyId,
        startTime: startTime,
        endTime: endTime,
        content: data.content,
        fieldNum: data.fieldNum
      }
    }).then(res => {
      console.log(res, '后端返回数据')
      if (res.data.code === 0) {
        this.setState({
          success: true
        })
      } else {
        message.error({
          content: res.data.msg,
          style: { marginTop: 250, left: 100 }
        });
      }
    }).catch(function (error) {
      console.log(error);
    })
  }
  goback = () => {
    this.props.history.goBack()
  }


  render () {
    const format = 'HH:mm'
    const { success } = this.state
    const data = this.props.location.state.detail
    return (
      <div>
        <div style={{ marginLeft: 20 }} onClick={this.goback}>
          <svg t="1627520711747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="30" height="30"><path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667z m-324.693333 373.013334l174.464-174.485334a21.141333 21.141333 0 0 0-0.192-29.973333 21.141333 21.141333 0 0 0-29.973334-0.192l-208.256 208.256a20.821333 20.821333 0 0 0-6.122666 14.976c0.042667 5.418667 2.133333 10.837333 6.314666 14.997333l211.178667 211.2a21.141333 21.141333 0 0 0 29.973333 0.213334 21.141333 21.141333 0 0 0-0.213333-29.973334l-172.629333-172.629333 374.997333 2.602667a20.693333 20.693333 0 0 0 21.034667-21.034667 21.482667 21.482667 0 0 0-21.333334-21.333333l-379.242666-2.624z" fill="#3D3D3D" p-id="1948"></path></svg>
        </div>
        {!success ?
          <div className={staffCss.detail}>
            <div>
              <div style={{ fontWeight: 'bold', textAlign: "center" }} >申请详情</div>
              <div>
                <div className={staffCss.spacebetween}>申请人:<div>{data.userName}</div></div>
                <div className={staffCss.spacebetween}>申请人工号:<div>{data.userId}</div></div>
                <div className={staffCss.spacebetween}  >申请编号:<div>{data.applyId}</div></div>
                <div className={staffCss.spacebetween}>场地数量:<div>{data.siteNum}</div></div>              
                <div className={staffCss.spacebetween}>时长:<div>{data.duration}小时</div></div>
                <div className={staffCss.spacebetween}>打球日期:<div>{data.playDate.slice(0, 11)}</div></div>
                <div >备注:<div>{data.remark}</div></div>
              </div>
            </div>
            <div className={staffCss.feedback}>
              <div style={{ fontWeight: 'bold', textAlign: "center" }} >填写反馈</div>
              <div >
                <Form
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 10 }}
                  className={staffCss.feedBackForm}
                  onFinish={this.submitFeedback}
                >
                  <Form.Item label="打球日期" name="playDate" rules={[{ required: true, message: '请选择' }]} >
                    <DatePicker locale={locale} inputReadOnly />
                  </Form.Item>
                  <Form.Item label="打球时间" name="time" rules={[{ required: true, message: '请选择' }]} >
                    <TimePicker.RangePicker locale={locale} format={format} inputReadOnly />
                  </Form.Item>
                  <Form.Item label="打球场地编号" name="fieldNum" rules={[{ required: true, message: '请输入' }]} >
                    <Input />
                  </Form.Item>
                  <Form.Item label="评价" name="content" rules={[{ required: true, message: '请输入' }]} >
                    <TextArea showCount rows={5} />
                  </Form.Item>
                  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                      提交
                    </Button>
                  </Form.Item>

                </Form>
              </div>
            </div>
          </div> : <div className={staffCss.success}>
            <svg t="1625562479130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1668" width="100" height="100"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="1669"></path><path d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z" fill="#FFFFFF" p-id="1670"></path></svg>
            <div style={{ fontSize: 20, marginTop: 30 }}>填写成功</div>
            <Link to={{ pathname: "/feedback" }}>
              <Button type="primary" style={{ marginTop: 20 }} >
                查看反馈列表
              </Button>
            </Link>
          </div>
        }
      </div>

    );
  }
}



export default withRouter(feedbackDetail)

